<template>
    <div class="bigbox">
      <el-table ref="table" v-if="false" :data="tableData" style="width: 100%">
        <!-- 假设 el-table 是需要引用的组件 -->
      </el-table>
      <el-button type="success" @click="add">新增楼层</el-button>
      
      <el-dialog v-model="open" title="新增楼层">
        <el-form>
          <el-form-item label="名称">
            <el-input v-model="form.name" placeholder="请输入名称"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="open = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </template>
      </el-dialog>
  
      
      <el-tree 
        style="max-width: 300px ;"
        
        :data="treeData" 
        :props="defaultProps" 
        @node-click="handleNodeClick" >
        <template #default="{ node}">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span class="delt">
            <el-button type="success" :icon="Plus" circle @click="add2(node.data.id)" />
            <el-button type="primary" :icon="Edit" circle @click="Edit2(node.data.id)"/>
            <el-button type="danger" :icon="Delete" circle  @click="del(node.data.id)"/>
            
             <!-- <el-button type="danger"  class="delt" circle  @click="del(node.data.id)">删除 </el-button> -->
          </span>
        </span>
      </template>
      </el-tree>
      
     
    </div>
  </template>
  
  <script setup lang="ts">
  import { addCompany,getCompanys,delCompany,editCompany } from '../../apis/Building/Building';
  
  import { reactive, ref } from 'vue';
  
  import ElMessage from 'element-plus/es/components/message/index.mjs';
  
  import { buildTree } from '../../utils/treeUtil';

import { ElMessageBox } from 'element-plus/es/components/message-box/index.mjs';
import { Delete,Edit, Plus } from '@element-plus/icons-vue';

  
  
  const open = ref(false)
  const form = reactive({
    pid: 0,
    name: '',
  })
  
  interface Tree {
    id: number;
    label: string;
    name?: string;
    children?: Tree[];
  }
  
  const handleNodeClick = (data: Tree) => {
    console.log(data)
  }
  
  
  const defaultProps = {
    children: 'children',
    label: 'label',
  }
  
  const total = ref(0)
  
  const params = reactive<any>({
    page: 1,
    pageSize: 1000,
  });
  
  const tableData = ref<any>([]);
  const treeData = ref<Tree[]>([])
  
  const getData = async () => {
    const res: any = await getCompanys(params);
    console.log(res);
    
  
    tableData.value = res.list;
    total.value = res.counts
  
    treeData.value = buildTree(res.list)
  
    console.log("子组件调用", res.list);
  
    treeData.value.map(item => {
      item.label = item.name || ''; // 如果 item.name 是 undefined，则使用空字符串作为默认值
      if (item.children) {
        item.children.map(child => {
          child.label = child.name || ''; // 同理处理子节点
          if (child.children) {
            child.children.map(grandChild => {
              grandChild.label = grandChild.name || ''; // 处理孙子节点
            });
          }
        });
      }
    })
  }
  
  getData()
  
  const submit = () => {
    addCompany(form).then(res => {
      console.log(res);
      ElMessage('tianjiachenggong')
      getData()
    })
    open.value = false
    form.name = ''
  }



  const del = (id: number) => {
  // 确保 id 是数字类型
  if (typeof id !== 'number') {
    console.error('Invalid ID:', id);
    return;
  }

  ElMessageBox.confirm('确定删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await delCompany(id); // 调用删除接口
      ElMessage.success('删除成功');
      getData(); // 刷新数据
    })
    .catch(() => {
      ElMessage.info('已取消删除');
    });

  console.log("删除执行", id);
};


interface AddPrems {
  id: number;
  name: string;
}

const Edit2 = (id: number) => {
  if (typeof id !== 'number') {
    console.error('Invalid ID:', id);
    return;
  }

  const currentName = treeData.value.find(item => item.id === id)?.label || '';

  ElMessageBox.prompt('请输入新的楼层名称', '修改楼层名称', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputValue: currentName,
  })
  .then(async ({ value }) => {
    if (value && value.trim() !== '') {
      const addPrems: AddPrems = { id, name: value }; // 构造符合类型的对象
      await editCompany(addPrems); // 传入构造的对象
      ElMessage.success('修改成功');
      getData(); // 刷新数据
    } else {
      ElMessage.warning('请输入有效的楼层名称');
    }
  })
  .catch(() => {
    ElMessage.info('已取消修改');
  });
};

const add2 = (id: number) => {
  open.value = true
}
  
  const add = () => {
    open.value = true
  }
  
  
  </script>
  
  <style scoped>
  .bigbox{
      background-color: #fff;
      padding: 20px;
    }
  .add {
    width: 20px;
    color: #fff;
  }
  .delt{
    position: absolute;
    right: 0;
    
  }
  :deep(.el-tree-node__content){
    height: 40px;
    
  }
  </style>